<template>
  <div id="IncomeChart" class="echart-main bg_fff" style="width: 100%;height: 250px;"></div>
</template>

<script>

import * as echarts from 'echarts/core';
// 柱状图图表，图表后缀都为 Chart
import { LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
export default {
  components: {
  },

  props: {
    dataType: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      myChart: null,
      option: null,
    };
  },

  mounted() {

  },

  methods: {

    initData (list, dataType) {
      if (this.myChart) {
        this.setOption(list, dataType)
        return
      } else {
        setTimeout(() => {
          this.initChart(list, dataType)
        }, 500)
      }
    },

    initChart (list, dataType) {
      const chartDom = document.getElementById('IncomeChart')
      this.myChart = echarts.init(chartDom)

      const colors = ['#D1FB71']
      this.option = {
        color: colors,
        // legend: {
        //   data: ['累计数据']
        // },
        grid: {
          left: '16px',
          right: '16px',
          top: '20px',
          bottom: '10px',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          extraCssText: "z-index:3",
          axisPointer:{ type: 'shadow' }, // 触发效果 移动上去 背景效果
          formatter: function (params) {
            const type = dataType == 1 ? '累计数据' : '每期数据'
            const res = `
              <div style="text-align: center;">
                <span style="color: #8C8C8C; font-size: 12px;"">${params[0].name}</span>
              </div>
              <div style="text-align: center;">
                <div
                  style='display: inline-block;
                  width: 10px;
                  height: 20px;
                  color: ${params[0].color}'
                  >●</div>
                <span style="color: #8C8C8C; font-size: 12px;">${type}</span>
              </div>
              <div style="text-align: center; font-weight: bold; font-size: 18px;margin-top: 5px;">
                <span>${params[0].value}元</span>
              </div>
            `
            return res
          }
          // formatter: '{b0}<br />{a0}<br />{c0}元',
          // valueFormatter: function (value) {
          //   return value + '元';
          //   // return value > 10000 ? (value / 10000).toFixed(4) + '万元' : value + '元';
          // }
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            color: "#8C8C8C",
            fontSize: 11,
          },
          axisLine: { // 坐标轴样式
            color: "#8C8C8C",
            lineStyle: { // 线的样式
              color: '#E7E7E7',   
              opacity: 0.5 // 透明度
            },
          },
          axisTick:false, // 是否显示刻度
        },
        yAxis: {
          type: 'value',
          splitLine: { // 分隔辅助线
            lineStyle: {
              type: 'dashed', // 线的类型 虚线0
              opacity: 0.5 // 透明度
            },
          },
          axisLabel: {
            color: "#8C8C8C",
            fontSize: 11,
            formatter: function (value) {
              return value > 10000 ? (value / 10000) + '万元' : value + '元';
            }
          }
        },
        series: [
          {
            name: dataType == 1 ? '累计数据' : '每期数据',
            data: [],
            type: 'line',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(185, 228, 87, .1)'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 1)'
                }
              ])
            },
            smooth: true
          }
        ]
      }
      this.setOption(list, dataType)
    },

    setOption(list, dataType) {
      try {
        const data1 = list.map(item => {
          return item.value
        })
        const data2 = list.map(item => {
          return item.time
        })
        this.option.series[0].data = data1
        this.option.series[0].name = dataType == 1 ? '累计数据' : '每期数据'
        this.option.tooltip.formatter = function (params) {
          const type = dataType == 1 ? '累计数据' : '每期数据'
          const res = `
            <div style="text-align: center;">
              <span style="color: #8C8C8C; font-size: 12px;"">${params[0].name}</span>
            </div>
            <div style="text-align: center;">
              <div
                style='display: inline-block;
                width: 10px;
                height: 20px;
                color: ${params[0].color}'
                >●</div>
              <span style="color: #8C8C8C; font-size: 12px;">${type}</span>
            </div>
            <div style="text-align: center; font-weight: bold; font-size: 18px;margin-top: 5px;">
              <span>${params[0].value}元</span>
            </div>
          `
          return res
        }
        this.option.xAxis.data = data2
        this.myChart.clear()
        this.option && this.myChart.setOption(this.option)
        window.addEventListener('resize', () => {
          this.myChart.resize()
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
};
</script>

<style lang="less" scoped>

</style>
